<template>
  <div class="app-container">
    <el-alert
      title="数据汇总"
      type="success"
      effect="dark"
      :closable="false"
    />
    <div class="box">
      <el-card v-for="item in cardList" :key="item.title" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ item.title }}</span>
        </div>
        <div class="text item">
          <p>{{ item.content1 }}</p>
          <p>{{ item.content2 }}</p>
          <p>{{ item.content3 }}</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      cardList: [
        { title: '汇总信息', content1: '总访问次数：', content2: '总转化次数：', content3: '转化率：' },
        { title: '今日信息', content1: '今日访问次数：', content2: '今日转化次数：', content3: '今日转化率：' },
        { title: '近小时信息', content1: '近小时访问次数：', content2: '近小时转化次数：', content3: '近小时转化率：' }

      ]
    }
  },
  created() {
  },
  methods: {
  }
}
</script>

<style>

  .box{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }

  .box-card{
    padding: 30px;
    width: 30%;
    background: linear-gradient( skyblue, pink);
  }

</style>
